<template>
    <el-row>
        <el-col :span="14" :offset="5">
            <el-form ref="form" :model="productAttr" label-width="150px">
                <el-form-item label="属性名称">
                    <el-input v-model="productAttr.name"></el-input>
                </el-form-item>
                <el-form-item label="商品类型">
                    <el-select v-model="productAttr.product_attribute_category_id" placeholder="请选择商品类型">
                        <el-option v-for="item in attrCateOptions"
                                   :key="item.id"
                                   :label="item.name"
                                   :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="能否进行检索">
                    <el-radio-group v-model="productAttr.search_type">
                        <el-radio v-for="item in searchTypeOptions"
                                  :label="item.key" border>
                            {{item.display_name}}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="分类筛选样式">
                    <el-radio-group v-model="productAttr.filter_type">
                        <el-radio v-for="item in filterTypeOptions"
                                  :label="item.key" border>
                            {{item.display_name}}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商品属性关联">
                    <el-switch
                            v-model="productAttr.related_status"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item label="属性是否可选">
                    <el-radio-group v-model="productAttr.select_type">
                        <el-radio v-for="item in selectTypeOptions"
                                  :label="item.key" border>
                            {{item.display_name}}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="属性值的录入方式">
                    <el-radio-group v-model="productAttr.input_type">
                        <el-radio v-for="item in inputTypeOptions"
                                  :label="item.key" border>
                            {{item.display_name}}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="属性值可选值列表">
                    <el-input type="textarea" v-model="inputListFormat"></el-input>
                </el-form-item>
                <el-form-item label="是否支持手动新增">
                    <el-switch
                            v-model="productAttr.hand_add_status"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>

                <el-form-item label="排序值">
                    <el-input v-model="productAttr.sorted"></el-input>
                </el-form-item>

                <el-form-item label="属性类型">
                    <el-select v-model="productAttr.type" placeholder="请选择属性类型">
                        <el-option v-for="item in productAttrTypeOptions" :label="item.display_name" :value="item.key">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

<script>
    import {
        selectTypeOptions, inputTypeOptions, filterTypeOptions, searchTypeOptions, productAttrTypeOptions
    } from './common'

    import {saveProductAttr,listAttrCateOptions} from "@/api/goods/attr";

    export default {
        name: "GoodsAttrDetail",
        props: {
            isEdit: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                selectTypeOptions: selectTypeOptions,
                inputTypeOptions: inputTypeOptions,
                filterTypeOptions: filterTypeOptions,
                searchTypeOptions: searchTypeOptions,
                productAttrTypeOptions: productAttrTypeOptions,
                attrCateOptions: [],
                inputListFormat: undefined,
                attr: {
                    name: '',
                    cate: '',
                    date1: '',
                    date2: '',
                    delivery: true,
                    type: [],
                    resource: '',
                    desc: '',
                    sorted: 999
                },
                productAttr: {
                    product_attribute_category_id: undefined,
                    name: undefined,
                    select_type: undefined,
                    input_type: undefined,
                    input_list: undefined,
                    sorted: 999,
                    filter_type: undefined,
                    search_type: undefined,
                    related_status: true,
                    hand_add_status: false,
                    type: undefined
                }
            }
        },
        created() {
            this.initAttrOptions();
        },
        watch:{
            inputListFormat: function (newValue, oldValue) {
                newValue = newValue.trim().replace(/\n/g,',');
                this.productAttr.input_list = newValue;
            }
        },
        methods: {
            initAttrOptions() {
                listAttrCateOptions().then(res => {
                    this.attrCateOptions = res;
                })
            },
            onSubmit() {
                saveProductAttr(this.productAttr).then(res => {
                    this.$message({
                        dangerouslyUseHTMLString: true,
                        message: '添加成功',
                        type: 'success'
                    });
                })
            },
            resetForm(formName) {
            }
        },
    }
</script>

<style>

</style>
